﻿<template>
  <div class="common_card_container" ref="common_card">

    <transition-ground name="in-out">

      <card_inner v-show="list_data.first_obj.fade" :obj="list_data.first_obj" @next="next_step" @pre="pre_step"></card_inner>
      <card_inner v-show="list_data.sec_obj.fade" :obj="list_data.sec_obj" @next="next_step" @pre="pre_step"></card_inner>
      <card_inner v-show="list_data.thir_obj.fade" :obj="list_data.thir_obj" @next="next_step" @pre="pre_step"></card_inner>
      <card_inner v-show="list_data.for_obj.fade" :obj="list_data.for_obj" @next="next_step" @pre="pre_step"></card_inner>

      <finish_card v-show="list_data.finish_card_data.show"></finish_card>
    </transition-ground>

  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import common from "../../common/common.js";
  import filter from "../../filter/filter.js";
  import common_card_header from "./common_card_header.vue" ;
  import card_w from "./common_card_w.vue";
  import sel_w from "./common_card_sel.vue"
  import card_inner from "./common_card_inner.vue"
  import finish_card from "./finish_card.vue"
  //limit_Scroll
export default {
  name: 'hello',
  data () {
    return {
        /*sec_obj first_obj thir_obj for_obj finish_card_data*/
         now_state:0,
         state_list:["first_obj","sec_obj","thir_obj","for_obj","finish_card_data"],
         list_data:this.$store.getters.get_common_card
    }
  },
  ...mapActions([
    "thom_redirect",

  ]),

  ...mapMutations([
     "Change_certain_layer"
  ]),
  created:function () {
//    this.$store.getter.common_card;
  },
  mounted: function () {


  },
  methods: {
    next_step:function () {
         this.now_state > 4 ? this.now_state : this.now_state += 1;

         this.$store.commit("set_common_card",this.state_list[this.now_state])
    },
    pre_step:function () {
        this.now_state <= 0 ? this.now_state :this.now_state-=1;

        this.$store.commit("set_common_card",this.state_list[this.now_state])
    }
  },
  components: {
    common_card_header,
    card_w,
    sel_w,
    card_inner,
    finish_card
  }
}
</script>
<style scoped lang="scss">
  @import "../sass/common_card.scss";
  @import "../sass/ani.scss";
  .select_span{
    line-height: tovw(40);
  }


</style>
